Skip to content

perf: Load fonts with font-display swap, preloads and caching#889

Open
lfrancke wants to merge 1 commit into
mainfrom
perf/fonts-and-caching
Open

perf: Load fonts with font-display swap, preloads and caching#889
lfrancke wants to merge 1 commit into
mainfrom
perf/fonts-and-caching

Conversation

@lfrancke

@lfrancke lfrancke commented Jul 16, 2026

Copy link
Copy Markdown
Member

Description

I did run a Google Lighthouse/PageSpeed check over the docs site and had Claude help me with fixing some of the issues, namely these two:

image
  • Font display by using font-display: swap: text renders immediately in the fallback font instead of waiting for webfonts (Lighthouse estimates ~400 ms).
  • Partially: Network depenency tree: By preloading the two important fonts, so the swapping (above) should usually not even hit
  • Use efficient cache lifetimes: Cache-Control: max-age=3600. One hour only: the bundle file names aren't content-hashed yet, so I didn't want to go any higher. My plan is to use content-hashing in the future. Especially now with bunny in front that should make things easier.

@netlify

netlify Bot commented Jul 16, 2026

Copy link
Copy Markdown

Deploy Preview for stackable-docs ready!

Name Link
🔨 Latest commit b322948
🔍 Latest deploy log https://app.netlify.com/projects/stackable-docs/deploys/6a5f34568fb3040008937975
😎 Deploy Preview https://deploy-preview-889--stackable-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@lfrancke
lfrancke force-pushed the perf/fonts-and-caching branch 3 times, most recently from 1b9508a to 455d079 Compare July 21, 2026 08:51
Mobile Lighthouse attributes ~400 ms of first-paint delay to the fonts
blocking text rendering:

- font-display: swap on all six faces, so text renders in the fallback
  font until the webfonts arrive.
- Preload the two above-the-fold fonts (body Noto Sans 400 and heading
  IBM Plex Mono 600), so they usually arrive before first paint anyway.
- Cache the UI bundle assets for a day via netlify.toml headers (the
  Lighthouse cache-lifetimes finding; a day keeps a stale-css window
  after deploys short since the file names are not content-hashed).
@lfrancke
lfrancke force-pushed the perf/fonts-and-caching branch from 455d079 to b322948 Compare July 21, 2026 08:56
@lfrancke lfrancke moved this to Development: Waiting for Review in Stackable Engineering Jul 21, 2026
@lfrancke lfrancke self-assigned this Jul 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Development: Waiting for Review

Development

Successfully merging this pull request may close these issues.

1 participant